<template>
  <el-dialog title="选择负责人" width="40%"
                  append-to-body class="disCheck" center
                  v-model="openDialog">
    <el-form :inline="true">
      <el-form-item label="手机号码">
        <el-input placeholder="请输入手机号码" v-model="searchData.phonenumber"></el-input>
      </el-form-item>
      <el-form-item>
        <div class="flex" style="display:flex;align-items:center;margin-left: 10px">
          <el-button type="primary" @click="searchList"
          ><el-icon style="margin-right: 5px"><Search /></el-icon>查询</el-button
          >
          <div style="width: 10px"></div>
          <el-button @click="resetSearchList"
          ><el-icon style="margin-right: 5px"><RefreshRight /></el-icon>重置</el-button
          >
        </div>
      </el-form-item>
    </el-form>
    <el-table :data="tableProjectData" border
              @selection-change="handleSelectionChange"
              v-loading="listLoading1"
              :class="[isCheck ? '' : 'disCheck']"
              ref="myTable">
      <el-table-column
        type="selection"
        width="55"
        align="center"
      >
      </el-table-column>
      <el-table-column
        label="用户昵称"
        prop="nickName"
        align="center"
      ></el-table-column>
      <el-table-column
        label="手机号码"
        prop="phonenumber"
        align="center"
      ></el-table-column>
      <el-table-column
        label="创建时间"
        prop="createTime"
        align="center"
      ></el-table-column>
    </el-table>
    <div style="height: 20px"></div>
    <div style="display: flex; justify-content: center">
      <el-pagination
        background
        layout="sizes,prev,pager,next,jumper,total"
        :page-size="projectPaging.pageSize"
        :page-sizes="[5,10, 20, 30, 40, 50, 100]"
        :total="projectPaging.total"
        @size-change="projectChangeSize"
        @current-change="projectChangeCurrent"
      />
    </div>
    <template #footer>
      <div style="width: 100%;justify-content: center" class="fixed-row">
        <el-button type="primary" @click="selPorjectDia">确定</el-button>
        <el-button @click="openDialog = false">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
  import {listUser} from '~/api/public'
  const props = defineProps({
    projectId:{
      type:Object || String
    },
    isStart:{
      type:Boolean,
      default:true
    },
    isCheck:{
      type:Boolean,
      default:false,
    }
  })
  const emit = defineEmits(['throwProjectValue'])
  const openDialog = ref(false)
  const listLoading1 = ref(false)
  const projectPaging = reactive({
    pageSize:10,
    currentPage:1,
    total:0
  })
  const myTable = ref()
  const searchData = reactive({
    phonenumber:'',
  })
  const tableProjectData = ref([])
  const affirmSelectList = ref([])
  function searchList(){
    projectPaging.currentPage = 1
    getPorjectList()
  }
  function resetSearchList(){
    projectPaging.currentPage = 1
    searchData.phonenumber = ''
    getPorjectList()
  }
  function handleSelectionChange(val) {
    // 若存在一条数据 再次点击 该函数会执行三次 若没有数据选中，执行一次
    // 第一次 选中状态 val中有两条数据 => 走if
    // 第二次 清空数据 val为空  => 不走if
    // 第三次 将最后一条数据设置为选中状态 val有一条数据 =>不走if
    if(!props.isCheck){
      if (val.length > 1) {
        myTable.value.clearSelection();
        myTable.value.toggleRowSelection(val.pop());
      }
      if(val.length != 0){
        affirmSelectList.value = val
      }
      if(val.length == 0){
        affirmSelectList.value = []
      }
    }
    else{
      if(val.length != 0){
        affirmSelectList.value = val
      }
      if(val.length == 0){
        affirmSelectList.value = []
      }
    }
  }
  function selPorjectDia(){
    if(affirmSelectList.value.length){
      ElMessage({
        message:'选择成功',
        type:'success',
        appendTo:'.disCheck'
      })
      emit('throwProjectValue',affirmSelectList.value)
    }
    else{
      emit('throwProjectValue',[])
    }
    openDialog.value = false
  }
  function openProjectDia(){
    openDialog.value = true
    projectPaging.currentPage = 1;
    getPorjectList()
  }
  function projectChangeSize(val){
    projectPaging.pageSize = val
    getPorjectList()
  }
  function projectChangeCurrent(val){
    projectPaging.currentPage = val
    getPorjectList()
  }

  function getPorjectList(){
    const params ={
      pageSize:projectPaging.pageSize,
      pageNum:projectPaging.currentPage,
      ...searchData,
      state:props.isStart ? '已启用' : '',
    }
    listLoading1.value = true
    listUser(params).then(res => {
      if(res.code == 200){
        tableProjectData.value = res.rows
        projectPaging.total = res.total * 1
        listLoading1.value = false
        tableProjectData.value.forEach((item,index) => {
          if(props.isCheck){
            const idList = props.projectId.split(',')
            const ind = idList.findIndex(id => id == item.userId)
            if(ind != -1){
              nextTick(() => {
                myTable.value.toggleRowSelection(item,true);
              })
            }
          }
          else{
            if(item.userId == props.projectId){
              nextTick(() => {
                myTable.value.toggleRowSelection(item,true);
              })
            }
          }
        })
      }
      else{
        tableProjectData.value = []
        projectPaging.total = 0
        listLoading1.value = false
      }
    }).catch(()=>{
      listLoading1.value = false
    })
  }

  defineExpose({
    openProjectDia,
  })
</script>

<style scoped lang="less">
  .disCheck ::v-deep .has-gutter .cell .el-checkbox{
    visibility: hidden;
  }
</style>
